<template>
  <div class="rightbox" v-cloak>
    <h1>店铺管理
      <el-button style="float:right;margin-right:20px;" type="primary" size="mini" @click="Modify">修改</el-button>
    </h1>
    <div class="wrap-case-detail">
      <div class="detail-head">
        <div class="detail-headdesign-left">
          <img :src="contentList.companyLogo" alt="">
        </div>
        <div class="detail-head-right">
          <h2>{{contentList.companyName}}</h2>
          <p>成立时间：{{contentList.establishment}}</p>
          <p>注册资金：{{contentList.capital}}万</p>
          <p>公司简介：{{contentList.describe}}</p>
        </div>
      </div>
      <div class="detail-box">
        <div class="detail-box-pub" style="margin-top:40px;">
          <div class="title2-box">
            <span>设计方案</span>
            <a @click="morecase">更多>></a>
          </div>
          <div class="wrap-imgcase2" style="margin-top:10px;min-height:0">
            <div class="imgcase-box" v-for="(item, index) in contentList.schemeView" :key="index" v-if="index<3" @click="goDetail(item.schemeIndex)">
              <div class="cb-img">
                <img :src="item.layoutMap">
              </div>
              <div class="cd-text">
                <span class="cb-title">{{item.schemeName}}</span>
                <span class="cb-sum">{{item.imageCount}}张</span>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="title2-box" style="margin-top: 30px;margin-bottom:15px;">
          <span>设计师</span>
          <a @click="moredesign">更多>></a>
        </div>
        <div class="wrap-design-two2">
          <div class="det-pub" v-for="(item, index) in contentList.designerView" :key="index" v-if="index<10">
            <img :src="item.headImage">
            <div class="det-text">
              <p class="det-text-name">{{item.name}}</p>
              <p class="det-text-say">{{item.describe}}</p>
              <p class="det-text-good">擅长风格：
                <span v-for="(items, indexb) in item.strongs" :key="indexb">{{items}}、</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      contentList: [],
      contype: [],
      pagelimit: 5,
      pageindex: 0,
      total: '',
      name: ''
    }
  },
  methods: {
    morecase: function () {
      var that = this
      that.$router.push({
        path: '/caseList'
      })
    },
    moredesign: function () {
      var that = this
      that.$router.push({
        name: 'desigList'
      })
    },
    Search: function () {
      var that = this
      that.getList()
    },
    getList: function () {
      var that = this
      that.$axios.request('post', '/CompanyShop/Index')
        .then((res) => {
          if (res.code === 0) {
            that.contentList = res.data
          }
        })
    },
    handleCurrentChange (val) {
      var that = this
      that.pageindex = val
      that.getList()
    },
    Modify: function (scope) {
      var that = this
      that.$router.push({
        name: 'shopAdd'
      })
    },
    goDetail: function (key) {
      var that = this
      that.$router.push({
        name: 'caseDetail',
        query: {
          schemeIndex: key
        }
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style>
.wrap-imgcase2{
  width: 930px;
  min-height: 400px;
  margin: 0 auto;
  margin-top: 20px;
}
.imgcase-box{
  float: left;
  width: 296px;
  height: 248px;
  margin: 6px;
  background: #fff;
  box-shadow: 0 0 10px 5px rgba(95,95,95,0.05);
  cursor: pointer;
}
.cb-img{
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.cb-img>img{
  width: 100%;
}
.cd-text{
  width: 100%;
  height: 48px;
  line-height: 45px;
  font-size: 14px;
  color: #646464;
}
.cb-title{
  display: block;
  float: left;
  width: 77%;
  padding-left: 15px;
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.cb-sum{
  display: block;
  float: left;
  width: 23%;
  text-align: center;
}
.wrap-case-detail{
  width: 1000px;
  margin: 0 auto;
}
.detail-nav-title{
  padding: 15px 0;
  border-bottom: #eee solid 1px;
}
.detail-nav-title a{
  font-size: 14px;
  color: #646464;
}
.detail-head{
  width: 1000px;
  margin: 0 auto;
  padding: 25px 0;
  border-bottom: #ddd solid 1px;
  overflow: hidden;
}
.detail-head-left{
  float: left;
}
.detail-head-left>img{
  width: 240px;
}
.detail-headdesign-left{
  float: left;
}
.detail-headdesign-left>img{
  width: 120px;
}
.detail-head-right{
  width: 70%;
  float: left;
  margin-left: 34px;
}
.detail-head-right h2{
  margin-top: 14px;
  font-size: 18px;
  color: #323232;
  font-weight: bold;
}
.detail-head-right p{
  margin-top: 12px;
  font-size: 14px;
  color: #646464;
}
.detail-box{
  width: 1000px;
  margin: 0 auto;
  margin-top: 20px;
  padding-bottom: 40px;
}
.detail-box-pub{
  width: 100%;
}
.detail-box-pub h1{
  font-size: 18px;
  color: #323232;
  font-weight: bold;
  text-align: center;
}
.detail-box-pub img{
  width: 100%;
}
.title2-box{
  width: 920px;
  margin: 0 auto;
  overflow: hidden;
}
.title2-box span{
  padding-left: 12px;
  display: block;
  float: left;
  font-size: 24px;
  color: #323232;
  line-height: 28px;
  font-weight: 400;
  border-left: #d60000 solid 2px;
}
.title2-box a{
  float: right;
  margin-right: 15px;
  margin-top: 10px;
  font-size: 14px;
  color: #646464;
  cursor: pointer;
}
.wrap-design-two2{
  width: 920px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 10px 5px rgba(95,95,95,0.05);
}
.det-pub{
  padding: 40px 60px;
  border-bottom: #eee solid 1px;
  overflow: hidden;
  cursor: pointer;
}
.det-pub>img{
  display: block;
  float: left;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.det-text{
  width: 80%;
  float: left;
  margin-left: 30px;
}
.det-text-name{
  font-size: 20px;
  color: #323232;
}
.det-text-say{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  color: #646464;
  margin-top: 5px;
}
.det-text-good{
  font-size: 16px;
  color: #9c9c9c;
  margin-top: 5px;
}
.clear{
  clear: both;
}
</style>
